<template>
  <div>
    <van-nav-bar title="会员登录"  :left-arrow="true" @click-left="onClickLeft"/>
    <div class="content">

      <div class="title">手机号登录</div>
      <div class="desc">未注册的手机号登录后将自动注册</div>

      <div class="box">
        <input v-model="phoneNum" type="text" placeholder="请输入手机号码">
      </div>

      <div class="box">
        <input v-model="codeNum" type="text" placeholder="请输入图形验证码">
        <img class="code-img" v-if="codeImg" :src="codeImg" @click="codeImgClick" alt="">
      </div>

      <div class="box">
        <input type="text" v-model="verifyCode" placeholder="请输入短信验证码">
        <span class="phone-code" @click="sendCode">获取验证码</span>
      </div>

      <div @click="login" class="login-button">登录</div>
    </div>
  </div>
</template>

<script>
import instance from '@/utils/request';
import axios from 'axios';
import { Toast } from 'vant';
import {getCodeImage, getPhoneCode, loginRequest} from '@/api'
import { mapMutations } from 'vuex';
import { setLocalInfo } from '@/utils/storage';

export default {
  name: 'login',
  data(){
    return {
      phoneNum: '',
      codeNum: '',
      codeImg: '',
      codeKey: '',
      verifyCode: ''
    }
  },
  created(){
    this.codeImgClick()
  },
  
  methods:{
    onClickLeft(){
      this.$router.back() 
    },
    async codeImgClick(){
      const {data: {base64, key}} = await getCodeImage()
      this.codeImg = base64
      this.codeKey = key
    },
    async sendCode(){
      // 判断手机号
      if(!/^1[3-9]\d{9}$/.test(this.phoneNum)) {
        Toast('请输入手机号')
        return
      }

      // 判断图形验证码
      if(!/^\w{4}$/.test(this.codeNum)) {
        Toast('请输入验证码')
        return
      }

      await getPhoneCode(this.codeNum, this.codeKey, this.phoneNum)
      this.verifyCode = '246810'

    },
    async login(){

      const resp = await loginRequest(this.phoneNum) 
      setLocalInfo(resp.data)
      // 判断返回上一个页面还是切换到首页
      const goback = this.$route.query.goback
      
      if(goback){
        this.$router.back()
      } else {
        this.$router.replace('/')
      }
    },

    ...mapMutations('user', ['setVuexUserinfo'])
  }
}
</script>


<style lang="less" scoped>
.content {
  padding: 40px 30px 0px 30px;
  // background-color: pink;
  width: 100%;
  box-sizing: border-box;

  .title {
    font-size: 20px;
    color: #202020;
    font-weight: 500;
  }

  .desc {
    font-size: 13px;
    color: #999999;
    margin-top: 10px;
    margin-bottom: 30px;
  }

  .box {
    width: 100%;
    border-bottom: 1px solid #ccc;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;

    input {
      border: none;
      outline: none;
      height: 50px;
      font-size: 15px;
      flex: 1;
    }
    input::-webkit-input-placeholder { 
      /* WebKit browsers，webkit内核浏览器 */
      color: #ccc; 
      font-size: 15px;
    } 

    .code-img {
      width: 80px;
      height: 40px;
      margin-top: 10px;
    }

    .phone-code {
      color: orange;
      font-size: 13px;
    }
  }

  .login-button {
    color: white;
    background: linear-gradient(to right, orange, red);
    text-align: center;
    height: 40px;
    line-height: 40px;
    border-radius: 20px;
    margin-top: 40px;
  }

}

</style>